<template>
    <a-config-provider :theme="state.theme" :locale="state.locale">
        <a-style-provider>
            <router-view />
        </a-style-provider>
    </a-config-provider>
</template>
<script setup>
import zhCN from 'ant-design-vue/es/locale/zh_CN'
import 'dayjs/locale/zh-cn'
window.prototype = getCurrentInstance().appContext.config.globalProperties
const state = reactive({
    locale: zhCN,
    store: useStore(),
    theme: {
        token: {
            colorPrimary: useStore().config.primaryColor,
            autoInsertSpaceInButton: false,
        },
    },
})
watch(
    () => [state.store.config.primaryColor, state.store.config.compact, state.store.config.isDark],
    newArr => {
        state.theme.token.colorPrimary = newArr[0]
        state.theme.algorithm = []
        if (!newArr[1] && !newArr[2]) {
            state.theme.algorithm = [theme.defaultAlgorithm]
        }
        if (newArr[1]) {
            state.theme.algorithm.push(theme.compactAlgorithm)
        }
        if (newArr[2]) {
            state.theme.algorithm.push(theme.darkAlgorithm)
            document.getElementsByTagName('html')[0].className = 'dark'
        } else {
            document.getElementsByTagName('html')[0].className = ''
        }
    },
    { deep: true, immediate: true }
)
dayjs.locale('zh-cn')
</script>
